import React, { useState, useEffect } from 'react'
import { Toast, Button, Search } from 'react-vant';
import { ArrowLeft, DeleteO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import '../../scss/lwl/search.css'
export default function Sear() {
    const jump = useNavigate()
    const [value, setValue] = useState('');
    const [hisarr, setHis] = useState([])
    const [flag, setFlag] = useState(false)
    const [local, setLocal] = useState([])
    const UpHistory = (value) => {
        // console.log(value);
        if (value === '') {
            Toast.info('请输入内容')
        } else {
            setHis([...hisarr, value])
            localStorage.setItem('his', JSON.stringify([...hisarr, value]))
        }
        setLocal(JSON.parse(localStorage.getItem('his')))
        console.log(JSON.parse(localStorage.getItem('his')))
    }
    useEffect(() => {
        if (localStorage.getItem('his')) {
            setLocal(JSON.parse(localStorage.getItem('his')))
        }
    }, [])
    const guess=['福田','市中心','购物广场','地铁站','餐饮','娱乐']
    return (
        <div id='search'>
            <div className="searHead">
                <div className="searIcon">
                    <ArrowLeft fontSize={30} style={{ marginTop: '5px' }} onClick={() => { jump(-1) }} />
                </div>
                <div className="searInput">
                    <Search
                        showAction
                        actionText={<div onClick={() => Toast.info(value)}><Button type='warning' onClick={() => { UpHistory(value) }}>搜索</Button></div>}
                        value={value}
                        onChange={setValue}
                        placeholder="小区/商圈/地铁站/地点"
                        style={{ height: '100%' }}
                    />
                </div>
            </div>
            <div id="hisSearch">
                <p><span style={{ fontWeight: 'bold'}}>历史搜索</span><span><DeleteO fontSize={20} onClick={() => { setFlag(!flag) }} /></span></p>
                {local.map((item, index) => (
                    <div key={index} id='hisbox'>{item}<span className={flag ? 'span1' : 'span2'}>X</span></div>
                ))}
            </div>

            <div id="hisGuess">
                <h3>猜你需要</h3>
                {guess.map((item, index) => (
                    <span key={index} className='guess'>{item}</span>
                ))}
            </div>
        </div>
    )
}
